<template>
  <div class="attackDefenseContent">
    <el-row :gutter="20" v-if="attackDefenseList.length">
      <el-col :span="6" v-for="item in attackDefenseList" :key="item.name">
        <span class='attackDefenseTitle'>{{ showList[item.name] }}</span>
        <el-switch :width="lang === 'zh'?60:70" v-model="item.status" class="status switch" @change="protectAllChange(item.status, item.name)" :disabled='disList.includes(item.name) && item.status === "yes"' active-color="#009966" inactive-color="#CCCCCC" active-value="yes" inactive-value="no" :active-text="$t('启用')" :inactive-text="$t('停用')">
        </el-switch>
      </el-col>
      <el-col :span="6" v-for="item in logList" :key="item.name">
        <span class='attackDefenseTitle'>{{ $t(showList[item.name]) }}</span>
        <el-switch :width="lang === 'zh'?60:70" v-model="item.status" class="name switch" @change="protectAllChange(item.status, item.name)" :disabled='disList.includes(item.name) && item.status === "yes"' active-color="#009966" inactive-color="#CCCCCC" active-value="yes" inactive-value="no" :active-text="$t('启用')" :inactive-text="$t('停用')">
        </el-switch>
      </el-col>
      <el-col :span="6" key="large_icmp">
        <span class='attackDefenseTitle'>Large_icmp</span>
        <el-switch :width="lang === 'zh'?60:70" v-model="largeIcmpValue" class="largeIcmpValue switch" :disabled='true' active-color="#009966" inactive-color="#CCCCCC" active-value="yes" inactive-value="no" :active-text="$t('启用')" :inactive-text="$t('停用')">
        </el-switch>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAttackDefense, changeAttackDefense, getAttackDefenseLog } from '@/api/safe/attack-defense'
export default {
  name: 'attackDefense',
  data () {
    return {
      attackDefenseList: [],
      logList: [],
      disList: ['large_icmp', 'teardrop', 'ping of death'],
      showList: {
        'fraggle': 'Fraggle',
        'icmp_redirect': 'Icmp_redirect',
        'icmp_unreachable': 'Icmp_unreachable',
        'land': 'Land',
        'large_icmp': 'Large_icmp',
        'smurf': 'Smurf',
        'tcp_flag': 'Tcp_flag',
        'tracert': 'Tracert',
        'win_nuke': 'Win_nuke',
        'teardrop': 'Teardrop',
        'ping of death': 'Ping of death',
        'log': '日志' // this.$t('日志') python自动翻译用
      },
      lang: this.$i18n.locale,
      largeIcmpValue: 'yes'
    }
  },
  created () {
    getAttackDefense().then(res => {
      if (res.status === 0) {
        this.attackDefenseList = []
        for (let item in res.info[0]) {
          this.attackDefenseList.push({ name: item, status: res.info[0][item] })
        }
        this.attackDefenseList.push({ name: 'teardrop', status: 'yes' })
        this.attackDefenseList.push({ name: 'ping of death', status: 'yes' })
      }
    })
    getAttackDefenseLog().then(res => {
      if (res.status === 0) {
        this.logList = []
        for (let item in res.info[0]) {
          this.logList.push({ name: item, status: res.info[0][item] === 'off' ? 'no' : 'yes' })
        }
      }
    })
  },
  methods: {
    protectAllChange (status, name) {
      changeAttackDefense({ name: name, status: status })
    }
  }
}
</script>
<style lang="less" scoped>
.attackDefenseContent {
  margin-top: 15px;
  margin-left: 30px;
  line-height: 40px;

  .el-col {
    width: 280px;
    margin-right: 3px;
    margin-bottom: 3px;
    background-color: #eeeeee;
  }

  .el-row {
    max-width: 1250px;
  }
}

.attackDefenseTitle {
  width: 175px;
  margin-left: 10px;
  display: inline-block;
}</style>
